<template>
  <div class="citymap">
    <template>
      <el-row>
        <el-col :span="3">
        </el-col>
        <el-col :span="5">
            <el-button type="text" class="city_btn_show">
                旅馆
            </el-button>
        </el-col>
        <el-col :span="4">
        </el-col>
        <el-col :span="4">
        </el-col>
        <el-col :span="4">
        </el-col>
        <el-col :span="4">
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
            <div style="width: 100%;text-align:center">
                <router-link to="/mission">
                <el-button type="text" class="city_btn">
                机遇大厅
                </el-button>
                </router-link>
            </div>
        </el-col>
      </el-row>
      <el-row>
      </el-row>
      <el-row>
        <el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="5">
            <el-button type="text" class="city_btn_show">
                沧海皇城
            </el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="6">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="2">
            <el-button type="text" class="city_btn_show">
                湾仔码头
            </el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
            <el-button type="text" class="city_btn_show">
                沧海修仙事务所
            </el-button>
        </el-col>
        <el-col :span="5">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="3">
            <router-link to="/citybackground">
            <el-button type="text" class="city_btn_show">
                沧海城广场
            </el-button>
            </router-link>
        </el-col>
        <el-col :span="1">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="7">
            <el-button type="text" class="city_btn_show">
                沧海城雕像
            </el-button>
        </el-col>
        <el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col><el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col><el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="6">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="2">
            <router-link to="/weaponshop">
            <el-button type="text" class="city_btn_show">
                法器店
            </el-button>
            </router-link>
        </el-col>
        <el-col :span="4">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="5">
            <el-button type="text" class="city_btn_show">
                道具店
            </el-button>
        </el-col>
        <el-col :span="7">
            <el-button type="text" class="city_btn_show">
                沧海城雕像
            </el-button>
        </el-col>
        <el-col :span="8">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="1">
            <el-button type="text" class="city_btn_show">
                功法市场
            </el-button>
        </el-col>
      </el-row>
              <el-row>
        <el-col :span="2">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="8">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="7">
            <el-button type="text" class="city_btn_show">
                防具店
            </el-button>
        </el-col>
        <el-col :span="8">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="1">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="5">
            <router-link to='/gate'>
                <el-button type="text" class="city_btn_show">
                    城门
                </el-button>
            </router-link>
        </el-col>
        <el-col :span="1">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="6">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="6">
            <div class="emptydiv">
                &nbsp;
            </div>
        </el-col>
        <el-col :span="2">
            <el-button type="text" class="city_btn_show">
                驿站
            </el-button>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
export default {
  name: "citymap",
  data() {
    return {};
  },
  created() {},
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
  components: {},
};
</script>

<style scoped>
.citymap {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  background: url(../assets/city1.jpg) no-repeat center center;
  background-size: 95% 100%;
}
.el-row {
    margin-bottom: 30px;
    margin-top: 5px;
    margin-right: 15px;
    &:last-child {
        margin-bottom: 0;
    }
}

.city_btn_show {
    width: 100%;
    opacity:1;
    filter:Alpha(Opacity='30');
    color: rgb(241, 241, 241);
    font-size: 20px;
    font-weight: bolder;
}
.city_btn {
    color: rgb(241, 241, 241);
    font-size: 20px;
    font-weight: bolder;
}
.emptydiv {
    width: 100%;
    height: 100%;
    min-height:1px;
    /* opacity:0.1;
    filter:Alpha(Opacity='10'); */
}
</style>

